<template>
    <view class="seach_box">
        <view class="left_icon" @tap="leftBack">
            <uni-icons class="icons" color="#323233" type="left" size="25"></uni-icons>
        </view>
        <view @tap="uni.navigateBack()" class="centerInput">
            <u-search v-model="par.bumphTitle" :clearabled="false" :showAction="false" shape="round" height="70rpx"
                actionText="搜索"></u-search>
            <view class="search_text" @tap="handleSearch">搜索</view>
        </view>
        <view class="right_filter">
            <text class="filter iconfont icon-shaixuan"></text>
        </view>
    </view>
    <view class="totals">
        为您找到相关结果 <text>{{ total }}</text> 条
    </view>

    <scroll-view @scrolltolower="scrolltolower" class="scroll-view" scroll-y>
        <uni-swipe-action>
            <uni-swipe-action-item v-for="(ele, index) in  list " :key="index">
                <view @tap="lookGw(ele)" class="scroll_item">
                    <view class="left_status">
                        <text :style="{ backgroundColor: back[ele.urgencyLevel] }" class="status_tips">{{
                            label[ele.urgencyLevel] }}</text>
                    </view>
                    <view class="right_content">
                        <view class="doc_title ellipsis">
                            {{ ele.bumphTitle }}
                        </view>
                        <view class="doc_date">
                            <text>{{ ele.sendUnit }}</text>
                            <text>{{ ele.sendDate }}</text>
                        </view>
                    </view>
                </view>
                <template v-slot:right>
                    <view class="wander" v-if="ele.sendStatus == 1" @tap="handleWander">流转</view>
                    <view class="Reading" v-if="ele.sendStatus == 0" @tap="handleReading(ele)">阅办</view>
                    <view style="background: red;" class="Reading" v-if="ele.sendStatus == 3" @tap="handleRevoke(ele)">撤销办结
                    </view>
                </template>
            </uni-swipe-action-item>
        </uni-swipe-action>
        <view v-show="list.length > 10">
            <view class="none" v-if="isFinish">没有更多了~</view>
            <view class="loadMore" v-else>正在加载...</view>
        </view>

    </scroll-view>
</template> 
<script setup>
import { ref } from 'vue'
import { getReceivdocList } from '@/api/http'
import { onLoad } from "@dcloudio/uni-app";
import modal from '@/plugins/modal'
const isFinish = ref(false)
const total = ref(0)

const list = ref([])
const par = ref({
    pageNum: 1,
    pageSize: 10,
    bumphStatus: 1,
    bumphTitle: ''
})
const back = {
    '1': '#0dbea8',
    '2': '#F9C457',
    '3': '#EE0A24',
}
const label = {
    '1': '平急',
    '2': '加急',
    '3': '特急',
}
onLoad(() => {
    getList()
})
// 流转
const handleWander = () => {

}
// 流转
const leftBack = () => {
    uni.navigateBack()
}
const handleSearch = () => {
    par.pageNum = 1;
    list.value = []
    getList()
}
// 阅办
const handleReading = () => {

}
//撤销办结
const handleRevoke = () => {

}
const getList = async () => {
    if (isFinish.value) return modal.msg('暂无更多数据~')
    const res = await getReceivdocList(par.value)
    if (res.code == 200) {
        total.value = res.total
        list.value = [...list.value, ...res.rows]
        if (res.rows.length > 0) {
            par.value.pageNum++;
        } else {
            isFinish.value = true
        }
    }

}



const scrolltolower = () => {
    getList()
}

</script>

<style lang="scss">
page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
}

.scroll-view {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #fff;

    .loadMore,
    .none {
        color: #999;
        font-size: 26rpx;
        margin: 10rpx 0;
        text-align: center;
    }

    .wander,
    .Reading {
        display: flex;
        align-items: center;
        width: 140rpx;
        justify-content: center;
        color: #fff;
        background-color: #0d80d7;
        font-size: 28rpx;
    }

    .scroll_item {
        display: flex;
        width: 94%;
        margin: 0 auto;
        padding: 25rpx 0;
        // background-color: red;
        border-bottom: 2rpx solid #eeeeee;

        .left_status {
            width: 12%;

            .status_tips {
                color: #fff;
                font-size: 24rpx;
                padding: 2rpx 8rpx;
                border-radius: 9rpx;
            }
        }

        .right_content {
            flex: 1;

            .doc_title {
                font-size: 28rpx;
                color: #323233;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .doc_date {
                display: flex;
                justify-content: space-between;
                font-size: 28rpx;
                color: #999999;
                margin-top: 10rpx;
            }
        }
    }
}

.seach_box {
    display: flex;
    width: 100%;
    height: 100rpx;

    .left_icon {
        position: relative;
        width: 100rpx;
        height: 100%;

        .icons {
            position: absolute;
            top: 50%;
            left: 52%;
            transform: translate(-50%, -50%);
        }
    }

    .centerInput {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1;

        .u-search {
            width: 100%;
        }

        .search_text {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            align-items: center;
            width: 100rpx;
            height: 100%;
            font-size: 30rpx;
            color: #0D80D7;
        }
    }

    .right_filter {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 100%;

        .filter {
            font-size: 38rpx;
        }
    }
}

.totals {
    width: 90%;
    margin: 30rpx auto;
    font-size: 28rpx;

    text {
        color: #0D80D7;
    }
}
</style>
    